<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/21
  Time: 9:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <script src="${ctx}/js/jquery.min.js"></script>
    <script src="${ctx}/js/bootstrap.min.js"></script>
</head>
<body>
<h2>图书列表</h2>
<table class="table">
    <tr>
        <th>编号</th>
        <th>图书名</th>
        <th>封面图</th>
        <th>价格</th>
        <th>作者</th>
        <th>出版社</th>
        <th>出版日期</th>
        <th>分类名称</th>
        <th>操作</th>
    </tr>
    <c:forEach var="book" items="${pi.list}">
        <tr>
            <td>${book.id}</td>
            <td>${book.bookName}</td>
            <td><img src="${ctx}/${book.cover}" width="60"/></td>
            <td>${book.price}</td>
            <td>${book.author}</td>
            <td>${book.press}</td>
            <td>${book.pubDate}</td>
            <td>${book.category.cname}</td>
            <td>
                <a class="btn btn-default" href="${ctx}/toEdit/${book.id}.do">编辑</a>
                <a class="btn btn-default" href="javascript:;" onclick="deleteById(${book.id})">删除</a>
            </td>
        </tr>
    </c:forEach>
</table>
<a href="${ctx}/toAdd.do">添加新图书</a>

<hr/>

<nav>
    <ul class="pagination">
        <c:choose>
            <c:when test="${pi.pageNum eq 1}">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
            </c:when>
            <c:otherwise>
                <li><a href="javascript:void(0)" onclick="changePageNum(${pi.pageNum-1})" aria-label="Previous"><span
                        aria-hidden="true">&laquo;</span></a></li>
            </c:otherwise>
        </c:choose>

        <c:forEach var="sn" items="${pi.navigatepageNums}">
            <c:choose>
                <c:when test="${sn eq pi.pageNum}">
                    <li class="active"><a href="#">${sn}</a></li>
                </c:when>
                <c:otherwise>
                    <li><a href="javascript:void(0)" onclick="changePageNum(${sn})">${sn}</a></li>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <c:choose>
            <c:when test="${pi.pageNum eq pi.pages}">
                <li class="disabled">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:when>

            <c:otherwise>
                <li>
                    <a href="javascript:void(0)" onclick="changePageNum(${pi.pageNum+1})" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:otherwise>
        </c:choose>
    </ul>
</nav>
<form id="pageForm" action="${ctx}/list.do" method="post">
    <input type="hidden" name="pageNum" id="currentPage" value="1">
</form>

<form action="${ctx}/delete.do" method="post" id="deleteForm">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="id" value="" id="id">
</form>

<script>
    function changePageNum(pageNum) {
        //改存储页号的隐藏域的值
        $('#currentPage').val(pageNum);
        //提交表单
        $('#pageForm').submit();
    }

    function deleteById(id) {
        if(confirm("Are you sure to delete the "+id+" record?")){
            $("#id").val(id);
            $("#deleteForm").submit();
        }
        return false;

    }
</script>
</body>
</html>
